<template>
    <div>
      <el-dialog
        title="新公告"
        :visible="showPopup"
        width="30%"
        center
        @close="handleClose"
      >
        <div class="popup-content">
          <i class="fas fa-bell animated-bell"></i>
          <p>{{ latestNotice }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmNotice">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>import { Dialog } from 'element-ui';
  
  export default {
    components: {
      [Dialog.name]: Dialog,
    },
    props: {
      showPopup: Boolean,
      latestNotice: String,
    },
    methods: {
      confirmNotice() {
        this.$emit('noticeConfirmed');
        this.$emit('update:showPopup', false); // 关闭对话框的同时发送确认通知
        this.$global.isFirstVisit = false;
        console.log(this.$global.isFirstVisit);
      },
      handleClose() {
        // 直接关闭对话框，不再进行额外的确认操作
        this.$emit('update:showPopup', false);
      },
    },
  };
  </script>
  
  <style scoped>
  .alert-popup .el-dialog {
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  }
  
  .popup-content {
    text-align: center;
    padding-bottom: 20px;
  }
  
  .animated-bell {
    animation: scaleUpDown 1s infinite;
  }
  
  @keyframes scaleUpDown {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }
  </style>
  